<template>
    <div class="questionnaire">
        <x-header v-show="!isWeChar" class="income__header" :title="seleValue.curQue.title">
            <div @click="goBack" slot="overwrite-left" class="que__header--img">
                <img slot="icon" class="go-back" src="~assets/x3/ico/goback1.png">
            </div>
        </x-header>
        <!-- <div class="questionnaire-main">
            <div class="que-con">
                <h1 class="que-title">员工满意度调查</h1>
                <span class="que-detail">尊敬的同事：<br> &nbsp&nbsp&nbsp&nbsp您好！感谢您在百忙之中填写问卷，请您根据自己的实际感受和看法如实填写，本问卷采用匿名形式，所有数据仅供了解整体员工满意度情况，不针对个别数据进行研究。
                </span>
            </div>
        </div> -->

        <div class="quest-con">
            <!-- <cell> -->
            <div class="quest-desc">
                <span class="insure__list--title" slot="after-title">
                    <span class="insure__iconspan"></span>
                    <span class="quest__iconspan--title">{{seleValue.curQue.introductionTitle}}</span>
                </span>
            </div>
            <group>
                <cell>
                    <div class="que-input" slot="after-title" v-html="seleValue.curQue.introduction"></div>
                </cell>
            </group>
            <!-- </cell> -->
            <group>
                <cell v-for="(item,index) in seleValue.curQue.question" :key="index">
                    <span class="que-input" slot="after-title" v-html="item"></span>
                </cell>
            </group>
            <group v-show="seleValue.curQue.statementTitle!=''">
                <cell is-link :border-intent="false" :arrow-direction="showStatement ? 'up' : 'down'" @click.native="showStatement = !showStatement">
                    <span class="que-input" slot="after-title">
                        <check-icon :value.sync="agreeStatement"></check-icon>&nbsp&nbsp{{seleValue.curQue.statementTitle}}</span>
                </cell>
                <template v-if="showStatement">
                    <cell-box :border-intent="false" class="sub-item">
                        <div class="que-state" v-html="seleValue.curQue.statement"></div>
                    </cell-box>
                </template>
            </group>
        </div>

        <div style="height: 60px;"></div>
        <div class="que__btn">
            <div @click="goBack" class="que__leftbtn">
                是
            </div>
            <div @click="goInsure()" class="que__rightbtn">全否,继续投保</div>
        </div>

    </div>
</template>

<script>
import {
    XHeader, Group, Cell, CellFormPreview, XButton, TransferDom, Actionsheet, Checker, CheckerItem, Datetime, CheckIcon, CellBox
} from "vux";
import { RouteUrl, Mutations, intervalTime, TypeInsurance, FooterShow, PopState, Url_Key } from "src/common/const";
// import "src/common/pdf/components/pdf";
import { mapState, mapActions } from "vuex";
import { RequestUrl } from "src/common/url";
import DateUtil from "src/common/util/dateUtil";
export default {
    components: { XHeader, Group, Cell, CellFormPreview, XButton, TransferDom, Actionsheet, Checker, CheckerItem, Datetime, CheckIcon, CellBox },
    computed: mapState({
        isWeChar: "isWeChar",
        seleValue: "seleValue"

    }),
    data() {
        return {
            agreeStatement: false,
            showStatement: false,
        };
    },
    methods: {
        goInsure() {
            if (this.agreeStatement || this.$common.isEmpty(this.seleValue.curQue.statementTitle)) {
                this.$common.goUrl(this, RouteUrl.INSURE);
            } else {
                this.$common.showErrorMsg(this, "请先阅读并勾选 " + this.seleValue.curQue.statementTitle);
            }
        },
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.DETAILS);
            // this.$common.goBack(this);
        },

    },
    mounted() {
        this.$init.subPageInit(this);

        document.title = this.seleValue.curQue.title;

        if (!this.seleValue.isSetQue) {
            this.$common.goBackUrl(this, RouteUrl.DETAILS);
        }
    }
}
</script>

<style lang="scss">
.que__btn {
  position: fixed;
  bottom: 0;
  z-index: 5; //向上层级
  color: white;
  width: 100%;
  height: 47px;
  line-height: 47px;
  text-align: center;
  font-size: 14px;
  box-shadow: 0px 0px 10px 1px #efefef;
}
.que-state {
  padding-bottom: 10px;
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  border-top: 1px solid #f0f0f0;
}
.questionnaire-main {
  background: white;
  width: 95%;
  height: 500px;
  display: block;
  margin: 2.5% auto 0px !important;
  padding-top: 0px;
}
// .questionnaire {
//   background: linear-gradient(to bottom, #C8161D 0%, #ffffff 100%);
// }
.que-title {
  font-weight: bold;
  color: #39a4db;
  font-size: 20px;
  text-align: center;
  padding-top: 5px;
}
.que-con {
  padding-left: 20px;
  padding-right: 20px;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 10px;
}
.que-detail {
  font-size: 13px;
}

.insure__iconspan {
  position: absolute;
  margin-top: 4px;
  width: 4px;
  height: 18px;
  background-color: #C8161D;
}
.que__leftbtn {
  font-size: 17px;
  width: 50%;
  height: 100%;
  float: left;
  background: #888888;
  color: #fff;
  span {
    color: #f6690a;
    font-size: 20px;
  }
}

.que__rightbtn {
  width: 50%;
  height: 100%;
  float: left;
  background: #C8161D;
  color: white;
  font-size: 17px;
}

.quest__iconspan--title {
  margin-left: 9px;
  font-size: 16px;
}

.quest-desc {
  margin-top: 10px;
  margin-left: 10px;
}

.que-input {
  font-size: 15px;
}
</style>
